<template>
	<div v-if="flag==1">
		<el-input v-model.number="searchData.clazzId" placeholder="请输入班级编号" />
		<el-input v-model="searchData.clazzName" placeholder="请输入班级名称" />
		<el-input v-model="searchData.teaName" placeholder="请输入负责人姓名" />
		<el-button @click="searchFn" class="searchBtn" type="info" :icon="Search">搜索</el-button>
		<el-button @click="addClassFn" class="addBtn" type="info" :icon="CirclePlus">添加</el-button>
		<el-table :data="tableData" style="width: 100%" height="58vh">
		    <el-table-column prop="clazzId" label="班级编号" align="center"/>
		    <el-table-column prop="clazzName" label="班级名称" align="center"/>
		    <el-table-column prop="teaName" label="负责人" align="center"/>
			<el-table-column prop="clazzRoom" label="上课教室" align="center"/>
			<el-table-column prop="num" label="班级人数" align="center"/>
			<el-table-column label=" " align="center">
				<template #default='scope'>
					<a class="detailBtn" @click="toDetailFn(scope.row.clazzId)">详情</a>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template #default='scope'>
					<a class="updateBtn" @click="updateClassFn(scope.row)">修改</a>
					<a class="delBtn" @click="del(scope.row.clazzId)">删除</a>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			layout="prev,pager,next"
			:page-size="pageSize"
			:page-count="pageCount"
			v-model:current-page="pageIndex"
			@current-change="changePage"
		/>
		
		<!-- 添加班级 -->
		<el-dialog v-model="DialogVisible" title="添加新的班级" width="500" center>
		    <el-form
		        ref="ruleFormRef"
		        style="max-width: 600px;"
		        :model="formData"
		        :rules="rules"
		        label-width="auto"
		    >
				<el-form-item label="班级名称" prop="className">
					<el-input v-model="formData.className" placeholder="请输入班级名称"/>
				</el-form-item>
				<el-form-item label="上课教室" prop="classRoom">
					<el-input v-model="formData.classRoom" placeholder="请输入上课教室"/>
				</el-form-item>
				<el-form-item label="负责人" prop="teacher">
					<el-select v-model="formData.teacher" placeholder="请选择负责人">
						<el-option
							v-for="item in teachList"
							:label="item.teaName"
							:value="item.teaId">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button type="info" class="cancelBtn" @click="DialogVisible = false">取消</el-button>
		        <el-button type="info" class="searchBtn" @click="addSure(formData,ruleFormRef)">确定</el-button>
		      </div>
		    </template>
		</el-dialog>
		<!-- 确认删除框 -->
		 <el-dialog
		    v-model="dialogVisible1"
		    title="提示"
		    width="400"
			center
		  >
		    <span>确定要删除该班级吗</span>
		    <template #footer>
		      <div class="dialog-footer">
		        <el-button type="info" class="cancelBtn" @click="dialogVisible1=false">取消</el-button>
		        <el-button class="searchBtn" type="info" @click="define">
		          确定
		        </el-button>
		      </div>
		    </template>
		  </el-dialog>
	</div>
	<UpdateClass :myItem="detailObj" v-if="flag==2" @update-message="handleMessageUpdate"></UpdateClass>
	<ClassDetail :classid="detclassid" v-if="flag==3" @update-message="handleMessageUpdate"></ClassDetail>
</template>

<script setup lang="ts">
	import {Search,CirclePlus} from '@element-plus/icons-vue'
	import {ClassList,TeacherList,InsertClass,SearchClass,DeleteClass} from "@/api/wym"
	import {reactive,ref,shallowRef,onMounted} from "vue";
	import type { FormInstance,FormRules } from 'element-plus';
	import { ElMessage } from 'element-plus'
	import UpdateClass from "@/components/UpdateClass.vue"
	import ClassDetail from "@/components/ClassDetail.vue"
	
	let flag=ref(1)
	// 返回
	function handleMessageUpdate () {
		flag.value = 1;
		classList()
	}
	const pageSize=7;
	let pageCount = shallowRef(0)
	const pageIndex=shallowRef(1);//当前的页数
	
	// 去班级详情
	let detclassid=ref(null);
	const toDetailFn=(item)=>{
		detclassid.value=item
		// console.log(detclassid.value)
		flag.value = 3;
	}
	
	// 班级列表
	let tableData = ref([])
	const classList=async()=>{
		let res=await ClassList({
			pageSize:pageSize,
			pageIndex:pageIndex.value,
		})
		// console.log("班级列表",res)
		tableData.value=res.data
		pageCount.value=res.pages
	}
	
	// 修改班级信息
	let detailObj=reactive({})
	const updateClassFn=(item)=>{
		// console.log(item)
		detailObj=item
		flag.value=2
	}
	
	// 搜索
	let searchData=reactive({
		clazzId:'',
		clazzName:"",
		teaName:'',
		pageSize:pageSize,
		pageIndex:pageIndex.value,
	})
	// 点击搜索
	const searchFn=async()=>{
		searchData.pageIndex=pageIndex.value
		// console.log(searchData)
		let res=await SearchClass(searchData)
		// console.log("搜索",res)
		tableData.value=res.data
		pageCount.value=res.pages
	}
	
	let DialogVisible = ref(false)
	// 点击添加班级
	const addClassFn=()=>{
		DialogVisible.value=true
	}
	interface RuleForm {
		className:string,
		classRoom:string,
		teacher:string,
	}
	let formData = reactive<RuleForm>({
		className: '',
		classRoom: "",
		teacher:""
	})
	// 点击添加中的确定
	const addSure =async (form,formEl)=>{
		formEl.validate(async (valid)=>{
			if(valid){
				DialogVisible.value=false
				// console.log("formData",formData)
				let res=await InsertClass({
					clazzName:formData.className,
					teaId:formData.teacher,
					clazzRoom:formData.classRoom
				})
				// console.log("添加",res)
				if(res == 1){
					ElMessage.success({
						message:"添加成功"
					})
				}else{
					ElMessage.error({
						message:"添加失败"
					})
				}
				classList()
			}
		})
	}
	
	// 教师列表
	let teachList=ref([])
	const teacherList=async()=>{
		let res=await TeacherList({
			pageIndex:1,
			pageSize:20
		})
		// console.log("教师列表",res)
		teachList.value=res.Tealist
	}
	
	//点击删除
	let dialogVisible1=ref(false)
	let clazzId;
	const del= (data)=>{
		dialogVisible1.value= true
		clazzId=data
	}
	//点击删除中的确定
	const define=async ()=>{
		// console.log(clazzId)
		dialogVisible1.value= false
		let res =await DeleteClass({
			clazzId:clazzId
		})
		// console.log("删除",res)
		if(res == 1){
			ElMessage.success({
				message:"删除成功"
			})
		}else{
			ElMessage.error({
				message:"删除失败"
			})
		}
		classList()
	}
	
	// 表单验证
	const ruleFormRef = ref<FormInstance>()
	const rules = reactive<FormRules<RuleForm>>({
		className: [
			{ required: true, message: '请输入班级名称', trigger: 'blur' },
		],
		classRoom: [
			{ required: true, message: '请输入教室名称', trigger: 'blur' },
		],
		teacher: [
			{ required: true, message: '请输入班级负责人', trigger: 'blur' },
		],
	})
	//点击分页
	const changePage=(page)=>{
		pageIndex.value=page;
		// console.log(pageIndex.value)
		searchFn();
	}
	
	onMounted(()=>{
		classList()
		teacherList()
	})
</script>

<style scoped lang="less">
	.el-input{
		width: 205px;
		margin-right: 10px;
		border: none;
	}
	.el-select{
		width: 205px;
	}
	.searchBtn{
		background-color: #106ab1;
		border: none;
	}
	.addBtn{
		background-color: #00a0e9;
		border: none;
		float: right;
		margin-right: 20px;
	}
	.cancelBtn{
		background-color: #999999;
	}
	/* 表格距顶部的距离 */
	.el-table{
		margin-top: 20px;
	}
	.el-table{
		--el-table-border-color:none;
		--el-table-borde:none;
		--el-table-bg-color:none !important;	
		--el-table-header-bg-color:#f3f8fd;
		--el-table-header-text-color:#333 !important
	}
	:deep(.el-table .el-table__cell){
		text-align: center !important;
	}
	/* 表格间隙 */
	:deep(.el-table__body) {
	  -webkit-border-vertical-spacing: 9px;
	}
	// 详情
	.detailBtn{
		color: #106ab1;
		cursor: pointer;
	}
	// 删除
	.delBtn{
		color: #ff0000;
		cursor: pointer;
	}
	.updateBtn{
		color: #6cac39;
		cursor: pointer;
		margin-right: 7px;
	}
	// 分页样式
	.el-pagination{
		--el-pagination-bg-color:none;
		--el-pagination-button-disabled-bg-color:none;
		justify-content: center;
	}
	.el-form-item{
		margin-left: 80px;
		margin-bottom: 20px;
		.el-input{
			width: 220px;
		}
		.el-select{
			width: 220px;
		}
	}

</style>